/**
 * Created by Administrator on 2017/9/13.
 */
var React = require('react');


var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var ajax = require('../tools/ajax');
var Icon = require('../components/Icon');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default",//Default/Blue
            Id:"",
            flag:false,
            pointInfo:[],
            shouRu:true,
            zhiChu:false,
        }
    },
    myScroll:"",

    componentDidMount: function () {
        this.getPointInfo();
        setTimeout(this.iscroll,500);
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#BalancePayments",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
    },
    /**获取积分收支信息*/
    getPointInfo(){
        var p=this;
        var userId = localStorage.getItem("userId");
        var point_status = p.state.shouRu ? 1 : 0;
        ajax("POST","getPointInfoByUserId",{userId:userId,point_status:point_status},function(dt){
            if(dt&&dt.success){
                var objs = dt.data;
                p.setState({pointInfo:objs});
                console.log(objs);
            }
        })
    },
    payBtn(e){
        var p=this;
        var textzhi = e.currentTarget.getAttribute("data");
        if(textzhi=="shouRu"){
            p.setState({shouRu:true,zhiChu:false},()=>{
                p.getPointInfo();
            })
        }else if(textzhi=='zhiChu'){
            p.setState({shouRu:false,zhiChu:true},()=>{
                p.getPointInfo();
            })
        }
    },
    render: function () {
        var p = this;
        var pointInfo = this.state.pointInfo;
        var pointInfoList = pointInfo.map(function(obj,index){
            var time = new Date(parseInt(obj.time) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
            return(
                <div className="reg" key={index}>
                    <div className="fl" id="jiang">
                        {obj.point_desc}<br/>
                        <span className="data-jiang">{time}</span>
                    </div>
                    <p className="fr">
                        <span className="ff00">
                            {obj.point_status?"+":"-"}
                            {obj.point}
                        </span>
                    </p>
                </div>
            )
        });

        return (
            <div className="main"  id="main">
                <Bheader theme={this.state.theme} title="收支明细" headr="false" hact="#integralMall"></Bheader>
                <div id="BalancePayments" className="container-t noFooter vip">
                    <div style={{minHeight:"31.18rem"}}>
                         <div id="Payments" className="w100">
                            <div className="w501 tac fl" onClick={p.payBtn} data="shouRu">
                                <span className={this.state.shouRu? "ace":""}>收入</span>
                            </div>
                            <div className="w501 tac fl" onClick={p.payBtn} data="zhiChu">
                                <span className={this.state.zhiChu? "ace":""}>支出</span>
                            </div>
                         </div>
                        <div className="pointInfo">
                            {pointInfoList}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});

